<template>
  <div id="marking" class="jx-content">
    <!-- 查重设置弹出框 -->
    <el-dialog :close-on-click-modal="false" class="dialog-check" title="查重设置" :visible.sync="dialogCheck" width="480px">
      <p>
        <i class="el-icon-warning"></i>批量控制该考试所有学生的实验报告重复率检查比率
      </p>
      <p class="dialog-b">实验报告代码查重校验
        <el-switch v-model="searchForm.dialogCheckSwitch"></el-switch>
      </p>
      <p v-if="searchForm.dialogCheckSwitch">
        实验报告相似度高于
        <el-select class="short-input" v-model="searchForm.repeatVal" placeholder="请选择">
          <el-option v-for="item in optionsRepeat" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- <el-input @keyup.native="proving(searchForm,'repeatVal')" class="short-input" v-model="searchForm.repeatVal"></el-input> -->
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="sameSet">保存</el-button>
      </span>
    </el-dialog>
    <div class="search-box fl">
      <el-form :inline="true" ref="searchForm" :model="searchForm">
        <el-form-item label="班级信息 :">
          <el-cascader class="cascader" :options="data" expand-trigger="hover" :props="cascaderconfig" change-on-select v-model="selectedOptions" @change="Change"></el-cascader>
        </el-form-item>
        <el-form-item label="批阅类型">
          <el-radio-group v-model="searchForm.radio">
            <el-radio :label="1">随堂练习</el-radio>
            <el-radio :label="2">实验报告</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <div @click="search" class="button-style">搜 索</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-group fr">
      <el-form :inline="true">
        <el-form-item>
          <div @click="dialogCheck = true" class="button-style">查重设置</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="clear"></div>
    <div class="c-btn-blue">注：此列表按照默认班级检索</div>
    <div v-if="resData">
      <el-table :data="resData" style="width: 100%">
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <el-table-column prop="name" label="班级名称">
          <template slot-scope="scope">
            <div class="beyond-hiding" :title="scope.row.name">{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="年份"></el-table-column>
        <el-table-column prop="endMessage" label="班级状态"></el-table-column>
        <el-table-column prop="chapterName" label="章节名称">
          <template slot-scope="scope">
            <div class="beyond-hiding" :title="scope.row.chapterName">{{ scope.row.chapterName }}</div>
          </template>
        </el-table-column>
        <el-table-column width="275" label="提交进度">
          <template slot-scope="scope">
            <div class="progress-box">
              <div class="progress-line">
                <el-progress color="#385899" :show-text="false" :text-inside="true" :percentage="scope.row.count/scope.row.total*100"></el-progress>
              </div>
              <div>已交{{ scope.row.count }}/{{ scope.row.total }}人</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <router-link v-if="resRadio === 1" :to="{path:'/Teaching/MyCourses/studentsSubmitDetailsList',query:{id:scope.row.id,chapterId:scope.row.chapterId}}">学生提交详情</router-link>
            <router-link v-else :to="{path:'/Teaching/MyCourses/studentsSubmitDetailsListTest',query:{id:scope.row.id,chapterId:scope.row.chapterId}}">学生提交详情实验</router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" layout="total, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
export default {
  data() {
    return {

      optionsRepeat: [
        {
          value: 90,
          label: "90%"
        },
        {
          value: 80,
          label: "80%"
        },
        {
          value: 70,
          label: "70%"
        },
        {
          value: 60,
          label: "60%"
        },
        {
          value: 50,
          label: "50%"
        },
        {
          value: 40,
          label: "40%"
        },
        {
          value: 30,
          label: "30%"
        },
        {
          value: 20,
          label: "20%"
        },
        {
          value: 10,
          label: "10%"
        }
      ],
      a: 20,
      cascaderconfig: {
        value: "id",
        label: "name"
      },
      //
      resRadio: 1,
      //查重设置弹出
      dialogCheck: false,
      //查重设置下拉菜单
      dialogCheckOption: 11,
      searchForm: {
        //信息
        info: "",
        //年份
        chooseYear: "",
        optionsYear: [],
        //班级
        chooseClass: "",
        optionsclass: [],
        //状态
        choosestatus: "",
        optionstatus: [],

        radio: 1,
        //查重百分比
        repeatVal: 90,
        //查重设置弹出开关
        dialogCheckSwitch: true
      },
      data: [],
      //获取列表数据
      resData: [],
      selectedOptions: [],
      currentPage: 1,
      pagesize: 10,
      totalCount: 1000
    };
  },
  created() {
    this.ClassList();
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.sameInit();
    },
    /********************************************************验证*****************************************/
    //限制查重设置input 正整数 不能大于100
    proving(item, prop) {
      let that = this;
      let reg = /^[0-9]+$/;
      let isInt = reg.test(item[prop]);

      if (!isInt) {
        item[prop] = "";
        that.$message({
          type: "warning",
          message: "只能输入整数"
        });
      }
      if (item[prop] > 100) {
        item[prop] = "";
        that.$message({
          type: "warning",
          message: "查重百分比不能大于100%"
        });
      }
    },
    /********************************************************验证*****************************************/
    sameInit() {
      let self = this;
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/check/duplicate-percent"
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.searchForm.dialogCheckSwitch = res.data.checkReportDuplicate;
            self.searchForm.repeatVal = res.data.reportDuplicatePercent;
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //查重设置
    sameSet() {
      let self = this;
      let obj = {
        checkReportDuplicate: self.searchForm.dialogCheckSwitch,
        reportDuplicatePercent: self.searchForm.repeatVal
      };
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/check/duplicate-percent",
          obj
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //过滤数据
    filterInitData(data) {
      let self = this;
      data.forEach(function(item) {
        if (item.defaultedClass == true) {
          self.selectedOptions.push(item.id);
        }
        item.children.forEach(function(it) {
          if (it.defaultedClass == true) {
            self.selectedOptions.push(it.id);
          }
          it.children.forEach(function(itChild) {
            if (itChild.defaultedClass == true) {
              self.selectedOptions.push(itChild.id);
            }
          });
        });
      });
      return [self.selectedOptions[self.selectedOptions.length - 1]];
    },
    //三级联动
    ClassList() {
      let self = this;
      self.$http
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/search/list-class"
        )
        .then(response => {
          //此处课程id是假定的值！！！！！
          let res = response.data;
          if (res.code == "200") {
            self.data = res.data;
            //console.log(JSON.stringify(res.data[0].children));
            let result = self.filterInitData(self.data);
            self.getInit(result);
          } else {
            self.$message.error(res.message);
          }
        });
    },
    //初始化获取列表
    getInit(result) {
      let self = this;
      self.$http
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/check?pageNum=" +
            // "/tes/quiz/statistics/91?pageNum=" +
            self.currentPage +
            "&pageSize=" +
            self.pagesize,
          {
            //此处课程id是假定的值！！！
            type: self.searchForm.radio,
            classIdList: result
          }
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.resData = res.data.content;
            self.totalCount = res.data.total;
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取列表
    getList() {
      let self = this;
      let result = self.Change();
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/check?pageNum=" +
            // "/tes/quiz/statistics/91?pageNum=" +
            self.currentPage +
            "&pageSize=" +
            self.pagesize,
          {
            //此处课程id是假定的值！！！
            type: self.searchForm.radio,
            classIdList: result
          }
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.resData = res.data.content;
            self.totalCount = res.data.total;
            self.resRadio = self.searchForm.radio;
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //处理数据返给后台方法
    Change() {
      let self = this;
      let result = [];
      let arr = [];
      let data = self.data;
      let selectedOptions = self.selectedOptions;
      if (self.selectedOptions.length == 1) {
        result = data
          .find(item => item.id === selectedOptions[0])
          .children.map(item => item.children)
          .reduce((total, num) => total.concat(num))
          .map(item => item.id);
      } else if (self.selectedOptions.length == 2) {
        result = data
          .find(item => item.id === selectedOptions[0])
          .children.find(item => item.id === selectedOptions[1])
          .children.map(item => item.id);
      } else if (self.selectedOptions.length == 3) {
        result.push(this.selectedOptions[this.selectedOptions.length - 1]);
      }
      return result;
    },
    //搜索
    search() {
      this.getList();
    },
    //分页
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      this.getList();
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
#marking {
  width: 1200px;
  margin: 30px auto;
  //查重设置弹出
  .dialog-check {
    p {
      line-height: 60px;
      text-align: center;
      i {
        color: $btn-blue;
        font-size: 20px;
        padding: 0 10px;
      }
    }
    .dialog-b {
      margin-left: -27px;
    }
    .el-dialog__footer {
      text-align: center;
    }
    .short-input {
      width: 80px;
      input {
        width: 80px;
      }
    }
  }
  .el-radio + .el-radio {
    margin-left: 10px;
  }
  .el-input__icon {
    line-height: 32px;
  }
  .progress-box {
    display: flex;
    justify-content: center;
    align-items: center;
    .progress-line {
      flex: 1;
      margin-right: 10px;
    }
  }
}
</style>
